<template>
  <div class="comments">
    <!-- 评论日期 -->
    <div class="commentDate">2020-11-21</div>
    <!-- 评论 -->
    <!-- 回复评论 -->
    <div class="reply" v-show="replyShow">
      <div class="user">回复：{{ replyUser }}</div>
      <div class="comment">{{ comment }}</div>
    </div>
    <div class="comment" v-show="replyShow">{{ replyContent }}</div>
    <div class="comment" v-show="!replyShow">{{ comment }}</div>
    <!-- 原文 -->
    <div class="originalText">原文：{{ originalText }}</div>
  </div>
</template>

<script>
export default {
  props: ["comment", "originalText", "replyShow", "replyUser", "replyContent"],
};
</script>
<style lang="less" scoped>
.comments {
  padding: 0 25/360 * 100vw;
  border-bottom: 2px solid #ccc;
  margin-top: 30/360 * 100vw;
  .commentDate {
    font-size: 12/360 * 100vw;
    color: #a0a0a0;
  }
  .comment {
    width: 300/360 * 100vw;
    margin: 5/360 * 100vw 0 8/360 * 100vw;
    font-size: 14/360 * 100vw;
    color: #533228;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .originalText {
    margin-bottom: 8/360 * 100vw;
    font-size: 12/360 * 100vw;
    color: #9f9f9f;
  }
  .reply {
    padding: 5/360 * 100vw 5/360 * 100vw;
    width: 250/360 * 100vw;
    background-color: #e4e4e4;
    color: #9f9f9f;
    .user {
      font-size: 12/360 * 100vw;
    }
    .comment {
      margin-bottom: 0/360 * 100vw;
      font-size: 12/360 * 100vw;
      color: #9f9f9f;
      word-break: normal;
      width: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow: hidden;
    }
  }
}
</style>